<template>
    <div id="yi">
        <el-row>
            <el-col :span="4"><div class="grid-content bg-purple">
                <img src="../../assets/主页logo.png" style="vertical-align:middle;width: 30px;margin: 0px 10px 5px 0px">
                <span style="color: white;font-size: 15px">思云课堂后台业务管理系统</span>
            </div></el-col>
            <el-col :span="12" :push="14">
                <div class="grid-content bg-purple">
                    <el-dropdown>
                          <span class="el-dropdown-link" ref="echarType">
                          <el-avatar :src="user.circleUrl" style="vertical-align: middle;"></el-avatar>
                            <span style="color: white;margin: 20px 10px 0px 5px">{{user.name}}</span>
                          </span>
                        <el-dropdown-menu slot="dropdown" class="box-card">
                            <span style="float: left; padding: 2px 20px;">账户信息</span>
                            <el-button style="float: right; padding: 3px 0;" type="text">账户设置</el-button>
                            <el-divider></el-divider>
                            <ul style="margin: 30px 0px 30px 0px">
                                <li class="text item">所在部门：审核部</li>
                                <li class="text item">本次登录：2018-01-03 12:34:21</li>
                                <li class="text item">登录地区：广东深圳</li>
                                <li class="text item">上次登录：2013-01-01</li>
                            </ul>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-divider direction="vertical"></el-divider><!--分界线-->
                    <span  style="margin: 10px"><router-link to="/"><i class="el-icon-s-home" style="font-size: 30px;vertical-align: middle;margin-top: 3px;color: white"></i></router-link></span>
                    <el-divider direction="vertical"></el-divider><!--分界线-->
                    <el-dropdown>
                        <span  style="margin: 10px"><i class="el-icon-s-unfold" style="font-size: 30px;vertical-align: middle;margin-top: 3px;color: white"></i></span>
                        <el-dropdown-menu slot="dropdown" class="box-card">
                            <span style="float: left; padding: 2px 20px;">常用菜单</span>
                            <el-button style="float: right; padding: 3px 5px;" type="text">菜单管理</el-button>
                            <el-divider></el-divider>
                            <div class="boxfather">
                                <div class="box"><router-link to="/">商品列表</router-link></div>
                                <div class="box"><router-link to="/">添加商品</router-link></div>
                                <div class="box"><router-link to="/">订单列表</router-link></div>
                                <div class="box"><router-link to="/">用户管理</router-link></div>
                                <div class="box"><router-link to="/">交易统计</router-link></div>
                                <div class="box"><router-link to="/">广告管理</router-link></div>
                                <div class="box"><router-link to="/">专题列表</router-link></div>
                                <div class="box"><router-link to="/">部门管理</router-link></div>
                                <div class="box"><router-link to="/">成员管理</router-link></div>
                            </div>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-divider direction="vertical"></el-divider><!--分界线-->
                    <el-dropdown>
                        <span  style="margin: 10px"> <i class="el-icon-message-solid" style="font-size: 30px;vertical-align: middle;;margin-top: 3px;color: white"></i></span>
                        <el-dropdown-menu slot="dropdown" class="box-card">
                            <span style="float: left; padding: 2px 20px;">提示</span>
                            <el-divider></el-divider>
                           <div style="width:90%;margin: 20px">
                               <span>您有商品待审核，请尽快处理<span style="float: right">(<span style="color: red;">{{disan.shangping}}</span>)</span></span>
                               <el-divider></el-divider>
                               <span>您有视频待审核，请尽快处理<span style="float: right">(<span style="color: red">{{disan.shiping}}</span>)</span></span>
                           </div>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-divider direction="vertical"></el-divider><!--分界线-->
                    <el-dropdown>
                        <span  style="margin: 10px"><i class="el-icon-brush" style="font-size: 30px;vertical-align: middle;margin-top: 3px;color: white"></i></span>
                        <el-dropdown-menu slot="dropdown" class="box-card">
                            <div style="margin: 20px">
                                <div style="margin-bottom:10px ">
                                    <el-row :gutter="20">
                                        <el-col :span="6"><div class="grid-content A" @click="btnClick02('#14e619')" :title="msg"></div></el-col>
                                        <el-col :span="6"><div class="grid-content B" @click="btnClick02('#c691e6')" :title="msg"></div></el-col>
                                        <el-col :span="6"><div class="grid-content C" @click="btnClick02('#e61813')" :title="msg"></div></el-col>
                                        <el-col :span="6"><div class="grid-content D" @click="btnClick02('#9b19e6')" :title="msg"></div></el-col>
                                    </el-row>
                                </div>
                                <div>
                                    <el-row :gutter="20">
                                        <el-col :span="6"><div class="grid-content E" @click="btnClick02('#4604e6')" :title="msg"></div></el-col>
                                        <el-col :span="6"><div class="grid-content F" @click="btnClick02('#00a8e6')" :title="msg"></div></el-col>
                                        <el-col :span="6"><div class="grid-content G" @click="btnClick02('#dae637')" :title="msg"></div></el-col>
                                        <el-col :span="6"><div class="grid-content H" @click="btnClick02('#37054d')" :title="msg"></div></el-col>
                                    </el-row>
                                </div>
                            </div>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-divider direction="vertical"></el-divider><!--分界线-->
                    <span  style="margin: 10px" @click="centerDialogVisible=true"><i class="el-icon-switch-button" style="font-size: 30px;vertical-align: middle;margin-top: 3px;color: white"></i></span>
                    <el-dialog
                            title="提示"
                            :visible.sync="centerDialogVisible"
                            width="20%"
                            height="20%"
                            center>
                        <span>确定关闭吗？？？？？</span>
                        <span slot="footer" class="dialog-footer">
                          <el-button @click="centerDialogVisible = false">取 消</el-button>
                          <el-button type="primary" @click="tuichu()">确 定</el-button>
                        </span>
                    </el-dialog>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "Yi",
        data(){
            return{
                msg:"点击换肤",
                checkindex:0,
                disan:{
                    shipin:0,
                    shangping:0,
                },
                user:{
                  name:"",
                  circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                },
                centerDialogVisible:false,
            }
        },
        methods:{
            //传颜色值给父组件
            btnClick02(item){
                this.$emit('colorDate',item)
            },
            toggle (index) {
                console.log(index)
                //this.checkindex = index
            },
            tuichu(){
                window.location.href = "Login.html";
            },
            async cs(){
                //待处理事务
                const shiwu = await this.$http.post("/xitongshouye/shenhe") .then((res)=>{
                    this.disan.shangping = res.data[1]
                    this.disan.shiping = res.data[0]
                })
                var s1 = sessionStorage.getItem("user");
                if(s1!=null){
                    var params = new URLSearchParams();
                    params.append('account',s1);
                    const Call = await this.$http.post("/zhanghu/user",params) .then((res)=>{
                        this.user.name=res.data.trueName
                        this.user.circleUrl=res.data.avatarUrl
                    })
                }
            }
        },
        created(){
            this.cs();
        }
    }
</script>

<style scoped>
    .A {
        background: #14e619;
    }
    .B {
        background: #c691e6;
    }
    .C {
        background: #e61813;
    }
    .D {
        background: #9b19e6;
    }
    .E {
        background: #4604e6;
    }
    .F {
        background: #00a8e6;
    }
    .G {
        background: #dae637;
    }
    .H {
        background: #37054d;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 100px;
    }
    /*设置点击前的样式 */
    a{
        text-decoration: none;
        color: #000;
    }
    a:hover{
        text-decoration: none;
        color: #ff5d90;
    }
    .el-divider--horizontal{
        margin: 35px 0px 20px 0px;
        background: 0 0;
        border-top: 1px dashed #e8eaec;
    }
    .boxfather{
        overflow: hidden;
        margin-left: 55px;
    }
    .box{
        float:left;
        width: 30%;
        padding-bottom: 10%;
        margin-right: 13px;
        margin-bottom: 10px;
    }
    .text {
        font-size: 14px;
    }
    .item {
        margin-bottom: 18px;
    }
    .box-card {
        width: 450px;
    }
</style>